<template>
	<view class="container">
		<scroll-view scroll-y class="scroll-container">
			
		</scroll-view>
		
		<!-- 底部导航栏 -->
		<view class="tab-bar">
			<view class="tab-item" @click="switchTab('home')" :class="{ active: currentTab === 'home' }">
				<image class="tab-icon" :src="getTabIcon('home')" mode="aspectFit"></image>
				<text class="tab-text">首页</text>
			</view>
			<view class="tab-item" @click="switchTab('notify')" :class="{ active: currentTab === 'notify' }">
				<image class="tab-icon" :src="getTabIcon('notify')" mode="aspectFit"></image>
				<text class="tab-text">通知</text>
			</view>
			
			<view class="tab-item tab-item-center">
				<view class="center-button" 
					  :class="{ active: isCenterActive }" 
					  @click="handleCenterClick">
					<image 
						:src="isCenterActive ? '../../static/deepseek-active.png' : '../../static/deepseek.png'" 
						mode="aspectFit"
					></image>
				</view>
			</view>

			<view class="tab-item" @click="switchTab('control')" :class="{ active: currentTab === 'control' }">
				<image class="tab-icon" :src="getTabIcon('control')" mode="aspectFit"></image>
				<text class="tab-text">控制</text>
			</view>
			<view class="tab-item" @click="switchTab('setting')" :class="{ active: currentTab === 'setting' }">
				<image class="tab-icon" :src="getTabIcon('setting')" mode="aspectFit"></image>
				<text class="tab-text">设置</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			currentTab: 'control',
			isCenterActive: false,
		}
	},
	methods: {
		// 切换标签页
		switchTab(tab) {
			this.currentTab = tab;
			switch(tab) {
				case 'home':
					uni.redirectTo({
						url: '/pages/index/index',
						animationType: 'pop-in',
						animationDuration: 200
					});
					break;
				case 'notify':
					uni.redirectTo({
						url: '/pages/notify/notify',
						animationType: 'pop-in',
						animationDuration: 200
					});
					break;
				case 'setting':
					uni.redirectTo({
						url: '/pages/setting/setting',
						animationType: 'pop-in',
						animationDuration: 200
					});
					break;
			}
		},
		// 获取图标路径
		getTabIcon(tab) {
			const baseUrl = '../../static/';
			return this.currentTab === tab ? 
				`${baseUrl}${tab}-active.png` : 
				`${baseUrl}${tab}.png`;
		},
		// 处理中间按钮点击
		handleCenterClick() {
				this.isCenterActive = !this.isCenterActive;
				// 添加页面跳转
				uni.redirectTo({
					url: '/pages/deepseek/deepseek',
					animationType: 'pop-in',
					animationDuration: 200
				});
			}
	}
}
</script>

<style>
/* 底部导航栏样式 */
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120rpx;
  background: white;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  z-index: 999; /* 确保导航栏在最上层 */
}

.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #999;
  transition: all 0.2s ease; /* 添加过渡动画 */
}

.tab-item.active .tab-icon {
  transform: scale(1.1); /* 图标稍微放大 */
}

.tab-item.active .tab-text {

  transform: scale(1.05); /* 文字稍微放大 */
}

.tab-icon {
  width: 48rpx;
  height: 48rpx;
  margin-bottom: 6rpx;
  transition: all 0.2s ease; /* 添加过渡动画 */
}

.tab-text {
  font-size: 24rpx;
  transition: all 0.2s ease; /* 添加过渡动画 */
}

.tab-item-center {
  transform: translateY(-30rpx);
}

.center-button {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  background-color: #4C6FFF;
  padding: 20rpx;
  box-shadow: 0 4rpx 8rpx rgba(76, 111, 255, 0.3);
}

.center-button.active {
  background-color: #FF69B4;
  box-shadow: 0 4rpx 8rpx rgba(255, 105, 180, 0.3);
}

.center-button image {
  width: 60%;
  height: 60%;
  transition: all 0.2s ease;
  filter: brightness(0) invert(1);
}

.center-button.active image {
  filter: brightness(0) invert(1);
}

.center-icon {
  display: none;
}
</style> 